<template>
  <div style="position: relative;margin-bottom:55px">
  	<div v-for="value in data">
		  	<div class="shou_huo">
		  		<p class="sh_m">{{value.username}}{{value.phone}}</p>
		  	  <div class="sh_y">
		  	  	<p>{{value.areaid_1}}{{value.areaid_2}}{{value.areaid_3}}{{value.address}}</p>
		  	  </div>
		  	</div>
	  	<div class="di_zhi">
		  		<div class="biao" @click="moren(value.address_id)">
		  			<img src="static/successful_small.png" v-show="value.show5">   <!--选中-->
		  			<img src="static/wei.png" v-show="value.show4" style="width: 18px;height: 18px;">   <!--未选中-->
		  		</div>
			  	<div class="sw" @click="moren(value.address_id)">选择</div>
			  	
			  	<div style="float:right">
			  	  <div class="xg_tu" @click="xiugai(value.address_id)">
			  	  	<img src="static/edit.png">
			  	  </div>
			  	  <div class="xiugai" @click="xiugai(value.address_id)">修改</div>
			  	  
				  	  <div class="sc_tu" @click="shanchu(value.address_id)">
				  	    <img src="static/delete@3x.png">
				  	  </div>
				  	  <div class="shanchu" @click="shanchu(value.address_id)">删除</div>
			  	</div>
			  	<div class="clearfix"></div>
	  	</div>
	  	
	  	<div style="height: 8px;width: 100%;background: #F5F5F5;"></div>
	  </div>
	  
  	<router-link :to="{path:'/baocunxindizhi2',query:{goods_id:this.goods_id}}">
  		<input type="button" value="添加新地址" class="bcxdz" />
  	</router-link>
  	
  	<loading :show="show2" :text="text1"></loading>
  	<div v-show="show1" style="width: 100%;margin-top: 80px;"><p style="font-size: 14px;line-height: 30px;text-align: center;">暂无记录</p></div>
  	<toast type="text" v-model="show3">{{tishi}}</toast>
  	
  </div>
</template>

<script>
//import { Group, Cell } from 'vux'
import axios from 'axios'
import { mapState, mapActions } from 'vuex'
export default {
  components: {
//  Group,
//  Cell
		mapState,
		mapActions,
  },
  data () {
    return {
      show2:false,
      text1:'loading...',
      show1:false,
      data:[],
//    show4:true,
      show3:false,
      tishi:'',
//    show5:false,
		goods_id:''
    }
  },
  created(){
  	this.goods_id = this.$route.query.goods_id;
  	this.show2 = true;
		this.chushi();
  },
  methods:{
  	chushi(){
  		axios.post(this.url + '/home/Address/getUserAddress',{openid:this.token}).then((res)=>{
	  		console.log(res);
	  	  this.show2 = false;
	  	  
	  	  if(res.data.length == 0){
	  	  	this.show1 = true;
	  	  }else{
	  	  	this.data = res.data;
	  	  	for(var i=0;i<this.data.length;i++){
	  	  		this.data[i].show4 = true;
	  	  		if(this.data[i].isdefault == 1){
	  	  				this.data[i].show5 = true;
	  	  				this.data[i].show4 = false;
	  	  	    }
	  	  	}
	  	  	
	  	  }
	  	})
  	},
  	moren(address_id){
	  	axios.post(this.url+'/home/Address/setDefault',{openid:this.token,address_id:address_id}).then((res)=>{
	  		console.log(res);
	  		this.show3 = true;
	  		this.tishi = res.data.msg;
			this.chushi();
			setTimeout(()=>{
				this.$router.push({path:"/lijifaqi",query:{goods_id:this.goods_id}})
			},2000)
	  	})
	  },
	  shanchu(address_id){
	  	axios.post(this.url+'/home/Address/delAddress',{openid:this.token,address_id:address_id}).then((res)=>{
	  		console.log(res);
	  		this.show3 = true;
	  		this.tishi = res.data.msg;
				this.chushi();
	  	})
	  },
	  xiugai(address_id){
	  	this.$router.push({path:'/xiugaidizhi2',query:{address_id:address_id,goods_id:this.goods_id}});
	  }
  },
  computed:{
      ...mapState({
          token: state => state.Token.userToken()//获取用户Token
      }),
  }
}
</script>

<style scoped>
body,html{width: 100%;height: 100%;}
body{position: relative;background: #f5f5f5;}
/*.sh li{font-size:16px;color: black;padding: 0 10px;}*/
/*.bcxdz{height: 50px;width: 100%;display: block;background: green;position: absolute;bottom: 0;color: white;}
.sw{margin-top:5px;}
.yuan{height: 25px;width: 25px;background: black;border-radius: 50%;float: left;margin: 0 5px;}
.sw li{font-size:16px;color:#ccc;list-style: none;margin: 0 5px;float: right;}*/
*{
	margin:0;
	padding:0;
}
.shou_huo{
	width: 100%;
	
	padding: 10px 15px;
	border: 1px /*solid*/ black;
	border-bottom: 1px solid #eeeeee;
	background-color: #ffffff;
}
.sh{
}
.sh_m{
	line-height: 14px;
	font-size: 14px;
	color: #333333;
	
}
.sh_y {
	margin-top: 6px;
	width: 100%;
	display: table;
	line-height: 17px;
	font-size: 13px;
	color: #9B9B9B;
}
.sh_y p{
	line-height: 17px;
	font-size: 13px;
	color: #9B9B9B;
	display: table;
}
.di_zhi{
	width: 100%;
	height: 44px;
	padding: 0 15px;
	background-color: #ffffff;
}
.sw{
	float: left;
	line-height: 13px;
	font-size: 13px;
	color: #7F7F7F;
	margin-left: 5px;
	margin-top: 16px;
		
}
.biao{
	height: 20px;
	width: 20px;
	margin-top: 12px;
	float: left;
	
}
.xiugai{
	float: left;
	line-height: 13px;
	font-size: 13px;
	color: #7F7F7F;
	margin-top: 16px;
	margin-left: 6px;
	
}
.shanchu{
	float: left;
	line-height: 13px;
	font-size: 13px;
	color: #7F7F7F;
	margin-top: 16px;
	margin-left: 2px;
}
.xg_tu{
	float: left;
	height: 20px;
	width: 20px;
	margin-left: 65px;
	margin-top: 12px;
}
.xg_tu img{
	display: block;
	width: 100%;
}
.sc_tu{
	float: left;
	height: 20px;
	width: 20px;
	margin-left: 20px;
	margin-top: 12px;
}
.sc_tu img{
	display: block;
	width: 100%;
}
.clearfix{
	float: none;
	clear: both;
}
.bcxdz{
height: 50px;
width: 100%;
display: block;
position: fixed;
bottom: 0;
color: white;
background: #00C850;
border: 1px solid #00C850;
}
</style>
